import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaDialog,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaSteps,
    WeaFormItem,
    WeaSearchGroup,
    WeaUpload,
    WeaCheckbox,
    WeaTable,
    WeaSelect,
    WeaInputNumber,
    WeaHelpfulTip,
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Button} from "antd";
import _ from 'lodash';
import LanguageConstant from '../../constant/LanguageConstant.js';

const {getLabel} = WeaLocaleProvider;

/**
 * 书签匹配组件
 */

@inject("bookmarkMatchingStore")
@observer
class BookmarkMatchingComponent extends Component {

    componentDidMount() {
        const {bookmarkMatchingStore, workflowMouldRelationalId} = this.props;
        bookmarkMatchingStore.init(workflowMouldRelationalId);
        if (workflowMouldRelationalId > 0) {
            bookmarkMatchingStore.getBookmarkMatchingTableDatas();
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {bookmarkMatchingStore} = this.props;
        const {workflowMouldRelationalId} = nextProps;
        bookmarkMatchingStore.init(workflowMouldRelationalId);
        if (workflowMouldRelationalId > 0) {
            bookmarkMatchingStore.getBookmarkMatchingTableDatas();
        }
    }

    render() {
        return (
            <div className="bookmark-matching-component">
                <Fragment>
                    {this.renderBookmarkTable()}
                </Fragment>
            </div>
        );
    }

    renderBookmarkTable() {
        const {bookmarkMatchingStore} = this.props;
        const {bookmarkMatchingDatas} = bookmarkMatchingStore;
        const columns = this.getColumns();
        return <WeaTable columns={columns} dataSource={toJS(bookmarkMatchingDatas)} pagination={false}/>;
    }

    getColumns() {
        const {bookmarkMatchingStore} = this.props;
        const {changeBookMarkTableField, selectOptions} = bookmarkMatchingStore;
        const {workflowFieldOptions} = selectOptions;
        const columns = [{
            title: getLabel(LanguageConstant.MOULD_BOOKMARK, "模板书签"),
            dataIndex: "bookmark",
            width: "35%",
        }, {
            title: getLabel(LanguageConstant.WORKFLOW_FIELD, "流程字段"),
            dataIndex: "fieldId",
            width: "25%",
            render: (text, record, index, onEdit) => {
                let fieldId = record.fieldId;
                if (fieldId == undefined) {
                    fieldId = "";
                }
                return (
                    <WeaSelect
                        showSearch
                        optionFilterProp="children"
                        style={{width: "100%"}}
                        options={workflowFieldOptions}
                        viewAttr={2}
                        value={"" + fieldId}
                        onChange={(value, showname) => {
                            changeBookMarkTableField(record.id, "fieldId", value, record)
                        }}
                    />
                )
            }
        }, {
            title: getLabel(LanguageConstant.BOOKMARKS_MATCHING_SHOWTYPE, "显示设置"),
            dataIndex: "type",
            width: "25%",
            render: (text, record, index, onEdit) => {
                let showType = record.showType;
                if (showType == undefined) {
                    showType = "";
                }
                let fieldId = record.fieldId;
                if (fieldId == undefined) {
                    fieldId = "";
                }
                let floatPrecision = parseInt("" + record.floatPrecision);
                let percentagePrecision = parseInt("" + record.percentagePrecision);
                if (isNaN(percentagePrecision) || percentagePrecision < 0) {
                    percentagePrecision = 2;
                }
                if (isNaN(floatPrecision) || floatPrecision < 0) {
                    floatPrecision = 2;
                }
                const multiLineTextTipInfo = getLabel(LanguageConstant.KEEP_MULTILINETEXT_TIP, "如果开启保留样式，那么此书签需要单独占一行，因为开启保留多行文本样式后套用时会删除书签对应行的内容");
                const showTypeIntVal = parseInt("" + showType);
                let multiLineTextTip = showTypeIntVal === 301;
                let key = "showType_" + fieldId;
                const showOptions = selectOptions[key];
                const random = key + "-" + Math.random();
                let selectStyle = {width: "100%"};
                let showFloatPrecision = false;
                let floatPrecisionFieldName = "floatPrecision";
                if (showTypeIntVal === 101 || showTypeIntVal === 102) {
                    showFloatPrecision = true;
                    if (showTypeIntVal === 101) {
                        floatPrecisionFieldName = "percentagePrecision";
                        floatPrecision = percentagePrecision;
                    }
                }
                if (showFloatPrecision) {
                    selectStyle = {width: "60%"}
                } else if (multiLineTextTip) {
                    selectStyle = {width: "90%"}
                }
                if (showOptions != undefined) {
                    return (
                        <div>
                            <WeaSelect
                                key={random}
                                style={selectStyle}
                                options={showOptions}
                                viewAttr={2}
                                value={"" + showType}
                                onChange={(value, showname) => {
                                    changeBookMarkTableField(record.id, "showType", value, record)
                                }}
                            />
                            {
                                showFloatPrecision && <div style={{width: "40%", display: "inline-block"}}>
                                    {/*<span>{getLabel(LanguageConstant.DECIMAL_PLACES, "小数位数")}</span>*/}
                                    <WeaInputNumber
                                        key={random + "-num"}
                                        style={{width: "100%"}}
                                        value={floatPrecision}
                                        min={0}
                                        max={100}
                                        onChange={value => {
                                            changeBookMarkTableField(record.id, floatPrecisionFieldName, value, record)
                                        }}
                                    />
                                </div>
                            }
                            {
                                multiLineTextTip &&
                                <div style={{width: "10%", "padding-left": "6px", display: "inline-block"}}>
                                    <WeaHelpfulTip title={multiLineTextTipInfo}/>
                                </div>
                            }
                        </div>
                    )
                } else {
                    return (<div></div>);
                }
            }
        }];
        return columns;
    }

}

export default BookmarkMatchingComponent;